<template>
	<view class="app-container" :class="'theme-' + currentTheme">
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<view class="nav-left">
				<button class="app-back-btn" @tap="goBack">←</button>
				<text class="app-title">个人信息</text>
			</view>
		</view>

		<!-- 个人信息内容 -->
		<view class="profile-content">
			<!-- 用户头像区域 -->
			<view class="profile-header">
				<view class="avatar-section">
					<image 
						class="profile-avatar" 
						:src="processAvatarUrl(userInfo.avatar) || processAvatarUrl(defaultAvatar)" 
						mode="aspectFill"
						@tap="changeAvatar"
						@error="onAvatarError"
					></image>
					<view class="avatar-overlay" :class="{ active: !uploadingAvatar }">
						<text class="avatar-change-text">{{ uploadingAvatar ? '上传中...' : '点击更换头像' }}</text>
					</view>
					<!-- 上传进度指示器 -->
					<view v-if="uploadingAvatar" class="upload-progress">
						<view class="progress-circle">
							<view class="progress-text">{{ uploadProgress }}%</view>
						</view>
						<!-- 添加进度条 -->
						<view class="progress-bar">
							<view class="progress-fill" :style="{ width: uploadProgress + '%' }"></view>
						</view>
						<text class="upload-status">正在上传头像...</text>
					</view>
				</view>
			</view>

			<!-- 基本信息卡片 -->
			<view class="info-card">
				<view class="card-header">
					<text class="card-title">基本信息</text>
				</view>

				<view class="info-form">
					<!-- 用户名 -->
					<view class="form-row">
						<view class="label-section">
							<text class="form-label">用户名</text>
						</view>
						<view class="input-section">
							<text class="form-value">{{ userInfo.username || '未设置' }}</text>
						</view>
					</view>

					<!-- 手机号 -->
					<view class="form-row">
						<view class="label-section">
							<text class="form-label">手机号</text>
						</view>
						<view class="input-section">
							<view class="phone-display">
								<text class="form-value">{{ userInfo.phone || '未认证' }}</text>
								<view class="phone-actions">
									<!-- 未设置手机号时显示去认证按钮 -->
									<button v-if="!userInfo.phone" class="action-btn-small verify-btn"
										@tap="openEditDialog('phone')">
										去认证
									</button>
									<!-- 已设置时显示修改按钮 -->
									<button v-else class="action-btn-small modify-btn" @tap="openEditDialog('phone')">
										去修改
									</button>
								</view>
							</view>
						</view>
					</view>

					<!-- 邮箱 -->
					<view class="form-row">
						<view class="label-section">
							<text class="form-label">邮箱</text>
						</view>
						<view class="input-section">
							<view class="email-display">
								<text class="form-value">{{ userInfo.email || '未认证' }}</text>
								<view class="email-actions">
									<!-- 未设置邮箱时显示去认证按钮 -->
									<button v-if="!userInfo.email" class="action-btn-small verify-btn"
										@tap="openEditDialog('email')">
										去认证
									</button>
									<!-- 已设置时显示修改按钮 -->
									<button v-else class="action-btn-small modify-btn" @tap="openEditDialog('email')">
										去修改
									</button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 账户信息卡片 -->
			<view class="info-card">
				<view class="card-header">
					<text class="card-title">账户信息</text>
				</view>

				<view class="info-form">

					<!-- 用户ID -->
					<view class="form-row">
						<view class="label-section">
							<text class="form-label">用户ID</text>
						</view>
						<view class="input-section">
							<text class="form-value">{{ userInfo.id || '427b9870-3308-4938-87e4-69a00b855193' }}</text>
						</view>
					</view>

					<!-- 注册时间 -->
					<view class="form-row">
						<view class="label-section">
							<text class="form-label">注册时间</text>
						</view>
						<view class="input-section">
							<text class="form-value">{{ userInfo.registerTime || userInfo.createdAt || new Date().toISOString().split('T')[0] }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 编辑模态框 -->
		<view v-if="editDialogVisible" class="modal-overlay" @tap="closeEditDialog">
			<view class="modal-container" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">{{ editType === 'email' ? '修改邮箱' : '修改手机号' }}</text>
					<button class="modal-close-btn" @tap="closeEditDialog">×</button>
				</view>
				
				<view class="modal-content">
					<view class="form-group">
						<view class="form-label">{{ editType === 'email' ? '新邮箱' : '新手机号' }}</view>
						<input 
							class="form-input" 
							:placeholder="editType === 'email' ? '请输入新邮箱地址' : '请输入新手机号码'"
							v-model="editForm.value"
							:type="editType === 'email' ? 'email' : 'tel'"
							maxlength="50"
						/>
						<text v-if="editForm.error" class="error-text">{{ editForm.error }}</text>
					</view>
					
					<view class="form-group">
						<view class="form-label">验证码</view>
						<view class="verification-input">
							<input 
								class="form-input verification-code" 
								placeholder="请输入验证码"
								v-model="editForm.code"
								type="number"
								maxlength="6"
							/>
							<button 
								class="send-code-btn" 
								:class="{ disabled: codeSending || countdown > 0 }"
								@tap="sendVerificationCode"
							>
								{{ codeSending ? '发送中...' : countdown > 0 ? `${countdown}s` : '获取验证码' }}
							</button>
						</view>
						<text v-if="editForm.codeError" class="error-text">{{ editForm.codeError }}</text>
					</view>
				</view>
				
				<view class="modal-footer">
					<button class="modal-btn cancel-btn" @tap="closeEditDialog">取消</button>
					<button class="modal-btn confirm-btn" @tap="submitEdit">保存</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { userApi } from '@/api/user'

// 默认头像（使用SVG data URL作为占位符）
const defaultAvatar = '';

	// 头像URL处理函数 - 解决Gitee图床CORS问题
	const processAvatarUrl = (url) => {
		if (!url) return url
		// 只要是http开头的都走代理，兼容gitee、oss等
		if (url.startsWith('http')) {
			return `https://images.weserv.nl/?url=${encodeURIComponent(url.replace(/^https?:\/\//, ''))}`
		}
		return url
	}
	
	// 头像加载错误处理
	const onAvatarError = (event) => {
		console.warn('头像加载失败:', event)
		// 如果代理加载失败，可以尝试使用原始URL
		const originalUrl = userInfo.avatar || defaultAvatar
		if (originalUrl && !originalUrl.includes('images.weserv.nl')) {
			console.log('尝试使用原始头像URL:', originalUrl)
		}
	}// 响应式数据定义
const currentTheme = ref('purple')
const userInfo = reactive({
	id: '',
	username: '',
	phone: '',
	phoneVerified: false,
	email: '',
	emailVerified: false,
	avatar: '',
	role: '',
	registerTime: '',
	lastLogin: ''
})

// 编辑模态框相关状态
const editDialogVisible = ref(false)
const editType = ref('email') // 'email' or 'phone'
const editForm = reactive({
	value: '',
	code: '',
	error: '',
	codeError: ''
})
const codeSending = ref(false)
const countdown = ref(0)

// 头像上传状态
const uploadingAvatar = ref(false)
const uploadProgress = ref(0)

// 加载主题
const loadTheme = () => {
	const savedTheme = uni.getStorageSync('currentTheme')
	if (savedTheme) {
		currentTheme.value = savedTheme
	}
}

// 加载用户信息
const loadUserInfo = () => {
	const storedUserInfo = uni.getStorageSync('userInfo')
	if (storedUserInfo) {
		// 优先使用用户存储的头像，如果是blob URL则过滤掉，如果为空则使用默认头像
		const userAvatar = (storedUserInfo.avatar && !storedUserInfo.avatar.startsWith('blob:'))
			? storedUserInfo.avatar 
			: defaultAvatar;

		Object.assign(userInfo, {
			...storedUserInfo,
			avatar: userAvatar,
			id: storedUserInfo.id || '427b9870-3308-4938-87e4-69a00b855193',
			phone: storedUserInfo.phone || '',
			phoneVerified: storedUserInfo.phoneVerified || false,
			email: storedUserInfo.email || '',
			emailVerified: storedUserInfo.emailVerified || false,
			role: storedUserInfo.role || '用户',
			registerTime: storedUserInfo.registerTime || storedUserInfo.createdAt || new Date().toISOString().split('T')[0]
		})
	} else {
		// 如果没有存储的用户信息，使用默认值
		Object.assign(userInfo, {
			avatar: defaultAvatar,
			id: '427b9870-3308-4938-87e4-69a00b855193',
			username: 'Guest',
			phone: '',
			phoneVerified: false,
			email: '',
			emailVerified: false,
			role: '游客',
			registerTime: new Date().toISOString().split('T')[0]
		})
	}
}

// 获取当前时间
const getCurrentTime = () => {
	const now = new Date()
	return now.toLocaleString('zh-CN', {
		year: 'numeric',
		month: '2-digit',
		day: '2-digit',
		hour: '2-digit',
		minute: '2-digit',
		second: '2-digit'
	})
}

// 返回上一页
const goBack = () => {
	// 优先尝试返回上一页
	const pages = getCurrentPages()
	if (pages.length > 1) {
		// 如果有历史页面，直接返回
		uni.navigateBack({
			delta: 1
		})
	} else {
		// 如果没有历史页面，尝试跳转到主页
		// 首先尝试 switchTab（如果是 tabBar 页面）
		uni.switchTab({
			url: '/pages/index/index',
			success: () => {
				console.log('成功跳转到主页 (tabBar)')
			},
			fail: (err) => {
				console.log('switchTab 失败，尝试 navigateTo:', err.errMsg)
				// 如果 switchTab 失败，说明不是 tabBar 页面，使用 navigateTo
				uni.navigateTo({
					url: '/pages/index/index',
					success: () => {
						console.log('成功跳转到主页 (navigateTo)')
					},
					fail: (navErr) => {
						console.error('所有跳转方式都失败:', navErr)
						// 最后的备用方案：使用 reLaunch
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}
				})
			}
		})
	}
}

// 显示敬请期待提示
const showComingSoon = () => {
	uni.showToast({
		title: '功能开发中，敬请期待',
		icon: 'none',
		duration: 2000
	})
}

// 打开编辑模态框
const openEditDialog = (type) => {
	editType.value = type
	editDialogVisible.value = true
	// 初始化表单数据
	editForm.value = type === 'email' ? (userInfo.email || '') : (userInfo.phone || '')
	editForm.code = ''
	editForm.error = ''
	editForm.codeError = ''
}

// 关闭编辑模态框
const closeEditDialog = () => {
	editDialogVisible.value = false
	// 重置表单数据
	editForm.value = ''
	editForm.code = ''
	editForm.error = ''
	editForm.codeError = ''
	// 重置验证码状态
	codeSending.value = false
	countdown.value = 0
}

// 验证输入格式
const validateInput = () => {
	editForm.error = ''
	
	if (!editForm.value.trim()) {
		editForm.error = editType.value === 'email' ? '请输入邮箱地址' : '请输入手机号码'
		return false
	}
	
	if (editType.value === 'email') {
		const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
		if (!emailRegex.test(editForm.value)) {
			editForm.error = '邮箱格式不正确'
			return false
		}
	} else {
		const phoneRegex = /^1[3-9]\d{9}$/
		if (!phoneRegex.test(editForm.value)) {
			editForm.error = '手机号格式不正确'
			return false
		}
	}
	
	return true
}

// 发送验证码
const sendVerificationCode = () => {
	if (!validateInput()) {
		return
	}
	
	if (codeSending.value || countdown.value > 0) {
		return
	}
	
	codeSending.value = true
	
	// 模拟发送验证码（注：后端暂未提供真实验证码发送API，测试时请使用123456）
	setTimeout(() => {
		codeSending.value = false
		countdown.value = 60
		
		uni.showToast({
			title: '验证码已发送（测试码：123456）',
			icon: 'success',
			duration: 3000
		})
		
		// 开始倒计时
		const timer = setInterval(() => {
			countdown.value--
			if (countdown.value <= 0) {
				clearInterval(timer)
			}
		}, 1000)
		
		uni.showToast({
			title: '验证码已发送',
			icon: 'success',
			duration: 2000
		})
	}, 1500)
}

// 提交编辑
const submitEdit = async () => {
	// 验证输入
	if (!validateInput()) {
		return
	}
	
	// 验证验证码
	editForm.codeError = ''
	if (!editForm.code.trim()) {
		editForm.codeError = '请输入验证码'
		return
	}
	
	if (editForm.code.length !== 6) {
		editForm.codeError = '验证码格式不正确'
		return
	}
	
	// 调用后端API
	uni.showLoading({
		title: '保存中...'
	})
	
	try {
		const userId = userInfo.id
		let response
		
		if (editType.value === 'email') {
			// 调用更新邮箱API
			response = await userApi.updateEmail(userId, {
				email: editForm.value,
				verificationCode: editForm.code
			})
			// 更新本地用户信息
			userInfo.email = editForm.value
		} else {
			// 调用更新手机号API
			response = await userApi.updatePhone(userId, {
				phoneNumber: editForm.value,
				verificationCode: editForm.code
			})
			// 更新本地用户信息
			userInfo.phone = editForm.value
		}
		
		// 更新本地存储
		uni.setStorageSync('userInfo', userInfo)
		
		// 通知其他页面用户信息已更新
		const updateData = {};
		if (editType.value === 'email') {
			updateData.email = editForm.value;
		} else {
			updateData.phone = editForm.value;
		}
		uni.$emit('userInfoUpdated', updateData);
		
		uni.hideLoading()
		uni.showToast({
			title: `${editType.value === 'email' ? '邮箱' : '手机号'}修改成功`,
			icon: 'success',
			duration: 2000
		})
		
		closeEditDialog()
		
	} catch (error) {
		uni.hideLoading()
		console.error('修改失败:', error)
		
		// 处理不同类型的错误
		let errorMessage = '修改失败，请重试'
		if (error.message) {
			errorMessage = error.message
		} else if (error.data && error.data.message) {
			errorMessage = error.data.message
		}
		
		// 如果是验证码错误，显示在验证码字段下
		if (errorMessage.includes('验证码')) {
			editForm.codeError = errorMessage
		} else {
			uni.showToast({
				title: errorMessage,
				icon: 'error',
				duration: 3000
			})
		}
	}
}

// 验证头像文件
const beforeAvatarUpload = (file) => {
	// 检查文件大小 (2MB)
	const fileSize = file.size || 0
	const isLt2M = fileSize / 1024 / 1024 < 2
	
	if (!isLt2M) {
		uni.showToast({
			title: '图片大小不能超过 2MB',
			icon: 'error',
			duration: 2000
		})
		return false
	}
	return true
}

// 更换头像
const changeAvatar = () => {
	// 如果正在上传，不允许再次选择
	if (uploadingAvatar.value) {
		uni.showToast({
			title: '正在上传中，请稍候',
			icon: 'none',
			duration: 2000
		})
		return
	}
	
	uni.chooseImage({
		count: 1,
		sizeType: ['compressed'],
		sourceType: ['album', 'camera'],
		success: (res) => {
			const tempFilePath = res.tempFilePaths[0]
			console.log('头像已选择:', tempFilePath)
			
			// 获取文件信息
			uni.getImageInfo({
				src: tempFilePath,
				success: (imageInfo) => {
					console.log('图片信息:', imageInfo)
					
					// 检查文件大小（注意：某些平台可能不支持size属性）
					const fileSizeCheck = !imageInfo.size || imageInfo.size / 1024 / 1024 < 2
					if (!fileSizeCheck) {
						uni.showToast({
							title: '图片大小不能超过 2MB',
							icon: 'error',
							duration: 2000
						})
						return
					}
					
					// 开始上传
					uploadAvatar(tempFilePath)
				},
				fail: (err) => {
					console.error('获取图片信息失败:', err)
					// 即使获取信息失败，也尝试上传
					uploadAvatar(tempFilePath)
				}
			})
		},
		fail: (err) => {
			uni.showToast({
				title: '选择头像失败',
				icon: 'error',
				duration: 2000
			})
			console.error('选择头像失败:', err)
		}
	})
}

// 上传头像到服务器
const uploadAvatar = (filePath) => {
	const token = uni.getStorageSync('token')
	if (!token) {
		uni.showToast({
			title: '请先登录',
			icon: 'error',
			duration: 2000
		})
		return
	}
	
	// 开始上传状态
	uploadingAvatar.value = true
	uploadProgress.value = 0
	
	const uploadTask = uni.uploadFile({
		url: `${apiConfig.baseUrl}/api/user/${userInfo.id}/avatar/upload`,
		filePath: filePath,
		name: 'file',
		header: {
			'Authorization': `Bearer ${token}`,
			'X-User-Id': userInfo.id
		},
		success: (uploadRes) => {
			console.log('上传响应:', uploadRes)
			
			try {
				const response = JSON.parse(uploadRes.data)
				
				if (response.isSuccess) {
					// 更新用户头像
					userInfo.avatar = response.data
					
					// 保存到本地存储
					const storedUserInfo = uni.getStorageSync('userInfo') || {}
					storedUserInfo.avatar = response.data
					uni.setStorageSync('userInfo', storedUserInfo)
					
					// 通知其他页面用户信息已更新
					uni.$emit('userInfoUpdated', { avatar: response.data })
					
					uni.showToast({
						title: '头像上传成功',
						icon: 'success',
						duration: 2000
					})
				} else {
					uni.showToast({
						title: response.message || '头像上传失败',
						icon: 'error',
						duration: 2000
					})
				}
			} catch (e) {
				console.error('解析上传响应失败:', e)
				uni.showToast({
					title: '头像上传失败',
					icon: 'error',
					duration: 2000
				})
			}
		},
		fail: (err) => {
			console.error('头像上传失败:', err)
			uni.showToast({
				title: '头像上传失败',
				icon: 'error',
				duration: 2000
			})
		},
		complete: () => {
			// 上传完成，重置状态
			uploadingAvatar.value = false
			uploadProgress.value = 0
		}
	})
	
	// 监听上传进度
	uploadTask.onProgressUpdate((res) => {
		uploadProgress.value = res.progress
		console.log('上传进度:', res.progress + '%')
	})
}

// 生命周期钩子 - 页面加载时执行
onMounted(() => {
	loadTheme()
	loadUserInfo()
	
	// 临时：为演示目的设置一个示例用户（实际项目中应该从后台API获取）
	const demoUser = {
		id: '497d5fcc-a127-4152-95a8-8a234abbe8e5',
		username: 'syl',
		avatar: 'https://gitee.com/shen-yulin20051127/image-storage/raw/master/avatars/497d5fcc-a127-4152-95a8-8a234abbe8e5.png',
		email: 'syl@example.com',
		phone: '13888888888',
		role: '开发者',
		registerTime: new Date().toISOString().split('T')[0]
	}
	
	// 如果本地没有用户信息，使用演示用户数据
	const storedUserInfo = uni.getStorageSync('userInfo')
	if (!storedUserInfo) {
		uni.setStorageSync('userInfo', demoUser)
		loadUserInfo() // 重新加载用户信息
	}
})
</script>

<style scoped>
/* 主题变量 */
.app-container {
	--primary-color: #667eea;
	--primary-light: #764ba2;
	--primary-dark: #667eea;
	--bg-primary: #0f0f23;
	--bg-secondary: #1a1a2e;
	--bg-card: rgba(255, 255, 255, 0.08);
	--text-primary: #ffffff;
	--text-secondary: #a0a0a0;
	--border-color: rgba(255, 255, 255, 0.12);
	--shadow-color: rgba(0, 0, 0, 0.3);
	--accent-1: rgba(102, 126, 234, 0.15);
	--accent-2: rgba(118, 75, 162, 0.15);
	--success-color: #00d4aa;
	--warning-color: #ff6b6b;

	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 1001;
}

/* 明亮主题 */
.app-container.theme-light {
	--primary-color: #6366f1;
	--primary-light: #8b5cf6;
	--primary-dark: #4f46e5;
	--bg-primary: #f8fafc;
	--bg-secondary: #ffffff;
	--bg-card: rgba(255, 255, 255, 0.9);
	--text-primary: #1e293b;
	--text-secondary: #64748b;
	--border-color: rgba(226, 232, 240, 0.8);
	--shadow-color: rgba(0, 0, 0, 0.08);
	--accent-1: rgba(99, 102, 241, 0.1);
	--accent-2: rgba(139, 92, 246, 0.1);
	--success-color: #10b981;
	--warning-color: #f59e0b;

	background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

/* 紫色主题 */
.app-container.theme-purple {
	--primary-color: #8b5cf6;
	--primary-light: #a78bfa;
	--primary-dark: #7c3aed;
	--bg-primary: #1e1b2e;
	--bg-secondary: #2d2438;
	--bg-card: rgba(255, 255, 255, 0.08);
	--text-primary: #f8fafc;
	--text-secondary: #a1a1aa;
	--border-color: rgba(255, 255, 255, 0.12);
	--shadow-color: rgba(139, 92, 246, 0.2);
	--accent-1: rgba(139, 92, 246, 0.15);
	--accent-2: rgba(236, 72, 153, 0.15);
	--success-color: #00d4aa;
	--warning-color: #ff6b6b;

	background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
}

/* 蓝色主题 */
.app-container.theme-blue {
	--primary-color: #0ea5e9;
	--primary-light: #38bdf8;
	--primary-dark: #0284c7;
	--bg-primary: #0c1427;
	--bg-secondary: #1e293b;
	--bg-card: rgba(255, 255, 255, 0.08);
	--text-primary: #f1f5f9;
	--text-secondary: #94a3b8;
	--border-color: rgba(255, 255, 255, 0.12);
	--shadow-color: rgba(14, 165, 233, 0.2);
	--accent-1: rgba(14, 165, 233, 0.15);
	--accent-2: rgba(59, 130, 246, 0.15);
	--success-color: #06d6a0;
	--warning-color: #f72585;

	background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
}

/* 背景装饰 */
.app-container::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
		radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
		radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
	pointer-events: none;
	z-index: 0;
	transition: all 0.5s ease;
}

/* 装饰性气泡 - 重新设计 */
.app-container::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image:
		radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.15) 0%, transparent 3%),
		radial-gradient(circle at 85% 35%, rgba(255, 255, 255, 0.12) 0%, transparent 4%),
		radial-gradient(circle at 35% 65%, rgba(255, 255, 255, 0.08) 0%, transparent 3.5%),
		radial-gradient(circle at 75% 85%, rgba(255, 255, 255, 0.1) 0%, transparent 2.5%),
		radial-gradient(circle at 25% 90%, rgba(255, 255, 255, 0.06) 0%, transparent 2%),
		radial-gradient(circle at 90% 15%, rgba(255, 255, 255, 0.09) 0%, transparent 3.2%),
		radial-gradient(circle at 45% 20%, rgba(255, 255, 255, 0.04) 0%, transparent 2.8%),
		radial-gradient(circle at 65% 75%, rgba(255, 255, 255, 0.07) 0%, transparent 3.8%);
	pointer-events: none;
	z-index: 1;
	animation: bubbleFloat 25s ease-in-out infinite;
}

@keyframes bubbleFloat {

	0%,
	100% {
		transform: translateY(0px) rotate(0deg);
		opacity: 0.8;
	}

	25% {
		transform: translateY(-8px) rotate(1deg);
		opacity: 1;
	}

	50% {
		transform: translateY(-15px) rotate(-0.5deg);
		opacity: 0.6;
	}

	75% {
		transform: translateY(-5px) rotate(1.5deg);
		opacity: 0.9;
	}
}

/* 导航栏 - 现代设计 */
.navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 50rpx 40rpx 40rpx;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(30rpx);
	border-bottom: 1rpx solid rgba(255, 255, 255, 0.2);
	z-index: 1003;
	position: relative;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.nav-left {
	display: flex;
	align-items: center;
	gap: 24rpx;
}

.app-back-btn {
	width: 70rpx;
	height: 70rpx;
	border-radius: 20rpx;
	background: rgba(255, 255, 255, 0.2);
	border: 1rpx solid rgba(255, 255, 255, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36rpx;
	color: white;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
	backdrop-filter: blur(10rpx);
}

.app-back-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
	border-radius: 20rpx;
}

.app-back-btn:active {
	transform: scale(0.92);
	background: rgba(255, 255, 255, 0.3);
}

.app-back-btn:active::before {
	opacity: 1;
}

.app-title {
	color: white;
	font-size: 42rpx;
	font-weight: 700;
	text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
	letter-spacing: 2rpx;
}

/* 个人信息内容 */
.profile-content {
	flex: 1;
	padding: 40rpx;
	position: relative;
	z-index: 1002;
	overflow-y: auto;
}

/* 个人头像区域 - 重新设计 */
.profile-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 80rpx;
	position: relative;
	padding: 40rpx 0;
}

.profile-header::before {
	content: '';
	position: absolute;
	top: -30rpx;
	left: 60rpx;
	width: 60rpx;
	height: 60rpx;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
	border-radius: 50%;
	animation: bubbleBounce 4s ease-in-out infinite;
	z-index: 1;
}

.profile-header::after {
	content: '';
	position: absolute;
	top: 40rpx;
	right: 50rpx;
	width: 40rpx;
	height: 40rpx;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
	border-radius: 50%;
	animation: bubbleBounce 5s ease-in-out infinite reverse;
	z-index: 1;
}

@keyframes bubbleBounce {

	0%,
	100% {
		transform: translateY(0px) scale(1);
		opacity: 0.7;
	}

	50% {
		transform: translateY(-20rpx) scale(1.15);
		opacity: 1;
	}
}

.avatar-section {
	position: relative;
	margin-bottom: 40rpx;
}

.profile-avatar {
	width: 240rpx;
	height: 240rpx;
	border-radius: 120rpx;
	border: 8rpx solid rgba(255, 255, 255, 0.3);
	box-shadow:
		0 20rpx 60rpx rgba(0, 0, 0, 0.3),
		0 8rpx 30rpx rgba(255, 255, 255, 0.1),
		inset 0 0 0 2rpx rgba(255, 255, 255, 0.2);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.profile-avatar::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
	animation: avatarShimmer 3s ease-in-out infinite;
	pointer-events: none;
}

@keyframes avatarShimmer {

	0%,
	100% {
		transform: translateX(-100%) translateY(-100%) rotate(0deg);
	}

	50% {
		transform: translateX(0%) translateY(0%) rotate(45deg);
	}
}

.avatar-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
	color: white;
	text-align: center;
	padding: 16rpx;
	border-radius: 0 0 120rpx 120rpx;
	opacity: 0;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	backdrop-filter: blur(10rpx);
}

.avatar-section:active .avatar-overlay {
	opacity: 1;
}

.avatar-section:active .profile-avatar {
	transform: scale(0.95);
	box-shadow:
		0 10rpx 30rpx rgba(0, 0, 0, 0.4),
		0 4rpx 15rpx rgba(255, 255, 255, 0.1);
}

.avatar-change-text {
	font-size: 26rpx;
	font-weight: 500;
}

/* 上传进度样式 */
.upload-progress {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.8);
	border-radius: 20rpx;
	padding: 30rpx;
	min-width: 200rpx;
	z-index: 10;
}

.progress-circle {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20rpx;
	box-shadow: 0 10rpx 20rpx rgba(102, 126, 234, 0.3);
	animation: pulse 1.5s ease-in-out infinite;
}

.progress-text {
	color: white;
	font-size: 24rpx;
	font-weight: bold;
}

.progress-bar {
	width: 160rpx;
	height: 8rpx;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 4rpx;
	overflow: hidden;
	margin-bottom: 16rpx;
}

.progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
	border-radius: 4rpx;
	transition: width 0.3s ease;
	box-shadow: 0 0 10rpx rgba(102, 126, 234, 0.5);
}

.upload-status {
	color: rgba(255, 255, 255, 0.9);
	font-size: 22rpx;
	text-align: center;
}

@keyframes pulse {
	0%, 100% {
		transform: scale(1);
		box-shadow: 0 10rpx 20rpx rgba(102, 126, 234, 0.3);
	}
	50% {
		transform: scale(1.05);
		box-shadow: 0 15rpx 30rpx rgba(102, 126, 234, 0.5);
	}
}

/* 信息卡片 - 现代玻璃风格 */
.info-card {
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(30rpx);
	border: 2rpx solid rgba(255, 255, 255, 0.2);
	border-radius: 32rpx;
	margin-bottom: 40rpx;
	overflow: hidden;
	box-shadow:
		0 20rpx 50rpx rgba(0, 0, 0, 0.1),
		inset 0 1rpx 0 rgba(255, 255, 255, 0.3);
	position: relative;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.info-card:hover {
	transform: translateY(-4rpx);
	box-shadow:
		0 30rpx 70rpx rgba(0, 0, 0, 0.15),
		inset 0 1rpx 0 rgba(255, 255, 255, 0.4);
}

.info-card::before {
	content: '';
	position: absolute;
	top: -20rpx;
	right: -20rpx;
	width: 120rpx;
	height: 120rpx;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
	z-index: 1;
	animation: cardBubble1 6s ease-in-out infinite;
}

.info-card::after {
	content: '';
	position: absolute;
	bottom: -25rpx;
	left: -15rpx;
	width: 100rpx;
	height: 100rpx;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
	z-index: 1;
	animation: cardBubble2 8s ease-in-out infinite;
}

@keyframes cardBubble1 {

	0%,
	100% {
		transform: translateY(0px) scale(1);
		opacity: 0.6;
	}

	50% {
		transform: translateY(-10rpx) scale(1.1);
		opacity: 0.9;
	}
}

@keyframes cardBubble2 {

	0%,
	100% {
		transform: translateX(0px) scale(1);
		opacity: 0.4;
	}

	50% {
		transform: translateX(8rpx) scale(1.05);
		opacity: 0.7;
	}
}

.card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 40rpx;
	background: rgba(255, 255, 255, 0.1);
	border-bottom: 1rpx solid rgba(255, 255, 255, 0.15);
	position: relative;
}

.card-header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2rpx;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
}

.card-title {
	color: white;
	font-size: 36rpx;
	font-weight: 700;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
	letter-spacing: 1rpx;
}

/* 表单样式 - 现代化 */
.info-form {
	padding: 40rpx;
}

.form-row {
	display: flex;
	align-items: center;
	margin-bottom: 40rpx;
	gap: 30rpx;
	padding: 20rpx;
	border-radius: 20rpx;
	background: rgba(255, 255, 255, 0.05);
	transition: all 0.3s ease;
}

.form-row:hover {
	background: rgba(255, 255, 255, 0.1);
	transform: translateX(8rpx);
}

.label-section {
	width: 180rpx;
	display: flex;
	align-items: center;
	gap: 12rpx;
	flex-shrink: 0;
}

.form-label {
	color: rgba(255, 255, 255, 0.8);
	font-size: 30rpx;
	font-weight: 600;
	text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
}

.input-section {
	flex: 1;
}

.form-value {
	color: white;
	font-size: 30rpx;
	font-weight: 500;
	word-break: break-all;
	text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);
}

/* 手机号和邮箱显示样式 */
.phone-display,
.email-display {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16rpx;
}

.phone-actions,
.email-actions {
	display: flex;
	align-items: center;
	gap: 12rpx;
	flex-shrink: 0;
}

.verified-actions {
	display: flex;
	align-items: center;
	gap: 12rpx;
}

/* 小按钮样式 - 现代设计 */
.action-btn-small {
	padding: 16rpx 28rpx;
	border-radius: 20rpx;
	font-size: 26rpx;
	font-weight: 600;
	border: none;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
	backdrop-filter: blur(10rpx);
	text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
}

.action-btn-small::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 0.5s ease, height 0.5s ease;
	pointer-events: none;
}

.action-btn-small:active::before {
	width: 120rpx;
	height: 120rpx;
}

.set-btn {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	box-shadow: 0 8rpx 25rpx rgba(102, 126, 234, 0.4);
	border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.verify-btn {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	box-shadow: 0 8rpx 25rpx rgba(102, 126, 234, 0.4);
	border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.modify-btn {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
	color: white;
	box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.1);
	border: 1rpx solid rgba(255, 255, 255, 0.3);
}

.action-btn-small:active {
	transform: scale(0.92);
}

.verify-badge {
	padding: 12rpx 24rpx;
	border-radius: 25rpx;
	font-size: 26rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(10rpx);
}

.verify-badge.verified {
	background: linear-gradient(135deg, #00d4aa 0%, #06d6a0 100%);
	color: white;
	box-shadow:
		0 8rpx 25rpx rgba(0, 212, 170, 0.4),
		inset 0 1rpx 0 rgba(255, 255, 255, 0.3);
	position: relative;
	overflow: hidden;
	border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.verify-badge.verified::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.4) 50%, transparent 60%);
	animation: shimmer 3s ease-in-out infinite;
	pointer-events: none;
}

@keyframes shimmer {

	0%,
	100% {
		transform: translateX(-100%) translateY(-100%) rotate(0deg);
	}

	50% {
		transform: translateX(0%) translateY(0%) rotate(45deg);
	}
}

.verify-text {
	font-size: 26rpx;
	font-weight: 600;
	text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);
}

.id-text {
	font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.9);
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.2) 100%);
	padding: 12rpx 20rpx;
	border-radius: 16rpx;
	backdrop-filter: blur(10rpx);
	border: 1rpx solid rgba(255, 255, 255, 0.2);
	word-break: break-all;
	line-height: 1.4;
	box-shadow:
		inset 0 1rpx 0 rgba(255, 255, 255, 0.1),
		0 4rpx 12rpx rgba(0, 0, 0, 0.2);
}

/* 明亮主题下的样式调整 */
.app-container.theme-light .card-title {
	color: white;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
}

.app-container.theme-light .form-label {
	color: rgba(255, 255, 255, 0.8);
	text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
}

.app-container.theme-light .form-value {
	color: white;
	text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);
}

.app-container.theme-light .id-text {
	color: rgba(255, 255, 255, 0.9);
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.app-container.theme-light .app-title {
	color: white;
}

.app-container.theme-light .app-back-btn {
	color: white;
}

/* 模态框样式 */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(20rpx);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
	from {
		opacity: 0;
		backdrop-filter: blur(0);
	}
	to {
		opacity: 1;
		backdrop-filter: blur(20rpx);
	}
}

.modal-container {
	width: 680rpx;
	max-width: 90vw;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(30rpx);
	border: 2rpx solid rgba(255, 255, 255, 0.2);
	border-radius: 32rpx;
	overflow: hidden;
	box-shadow: 
		0 30rpx 80rpx rgba(0, 0, 0, 0.3),
		inset 0 1rpx 0 rgba(255, 255, 255, 0.3);
	animation: modalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
}

@keyframes modalSlideIn {
	from {
		transform: translateY(-50rpx) scale(0.9);
		opacity: 0;
	}
	to {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
}

.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 40rpx;
	background: rgba(255, 255, 255, 0.1);
	border-bottom: 1rpx solid rgba(255, 255, 255, 0.15);
	position: relative;
}

.modal-header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2rpx;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
}

.modal-title {
	color: white;
	font-size: 36rpx;
	font-weight: 700;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
	letter-spacing: 1rpx;
}

.modal-close-btn {
	margin-right: 0px;
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	border: 1rpx solid rgba(255, 255, 255, 0.3);
	color: white;
	font-size: 40rpx;
	font-weight: 300;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	backdrop-filter: blur(10rpx);
}

.modal-close-btn:active {
	transform: scale(0.9);
	background: rgba(255, 255, 255, 0.3);
}

.modal-content {
	padding: 40rpx;
}

.form-group {
	margin-bottom: 40rpx;
}

.form-group:last-child {
	margin-bottom: 0;
}

.form-group .form-label {
	color: rgba(255, 255, 255, 0.9);
	font-size: 30rpx;
	font-weight: 600;
	margin-bottom: 20rpx;
	display: block;
	text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
}

.form-input {
	width: 100%;
	height: 80rpx;
	background: rgba(255, 255, 255, 0.1);
	border: 2rpx solid rgba(255, 255, 255, 0.2);
	border-radius: 20rpx;
	padding: 0 24rpx;
	color: white;
	font-size: 30rpx;
	backdrop-filter: blur(10rpx);
	transition: all 0.3s ease;
	box-sizing: border-box;
}

.form-input:focus {
	border-color: rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.15);
	outline: none;
}

.form-input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.verification-input {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.verification-code {
	flex: 1;
}

.send-code-btn {
	height: 80rpx;
	padding: 0 32rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border: 1rpx solid rgba(255, 255, 255, 0.2);
	border-radius: 20rpx;
	color: white;
	font-size: 26rpx;
	font-weight: 600;
	transition: all 0.3s ease;
	backdrop-filter: blur(10rpx);
	text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
	box-shadow: 0 8rpx 25rpx rgba(102, 126, 234, 0.4);
	white-space: nowrap;
}

.send-code-btn:active {
	transform: scale(0.95);
}

.send-code-btn.disabled {
	opacity: 0.6;
	background: rgba(255, 255, 255, 0.2);
	box-shadow: none;
	pointer-events: none;
}

.error-text {
	color: #ff6b6b;
	font-size: 24rpx;
	margin-top: 12rpx;
	text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
}

.modal-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 20rpx;
	padding: 40rpx;
	background: rgba(0, 0, 0, 0.1);
	border-top: 1rpx solid rgba(255, 255, 255, 0.15);
}

.modal-btn {
	height: 72rpx;
	padding: 0 40rpx;
	border-radius: 20rpx;
	font-size: 30rpx;
	font-weight: 600;
	transition: all 0.3s ease;
	backdrop-filter: blur(10rpx);
	text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
	border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.cancel-btn {
	background: rgba(255, 255, 255, 0.2);
	color: white;
}

.cancel-btn:active {
	transform: scale(0.95);
	background: rgba(255, 255, 255, 0.3);
}

.confirm-btn {
	background: linear-gradient(135deg, #00d4aa 0%, #06d6a0 100%);
	color: white;
	box-shadow: 0 8rpx 25rpx rgba(0, 212, 170, 0.4);
}

.confirm-btn:active {
	transform: scale(0.95);
}
</style>